import { StackNavigator, TabNavigator, NavigationActions } from 'react-navigation';
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image, Button, TouchableHighlight, FlatList,PixelRatio, Modal, ScrollView } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

var curDate = new Date();
var weekday = new Array(7)
weekday[0] = "星期日";
weekday[1] = "星期一";
weekday[2] = "星期二";
weekday[3] = "星期三";
weekday[4] = "星期四";
weekday[5] = "星期五";
weekday[6] = "星期六";

class ReportScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {modalVisible: false,};
    }

    static navigationOptions =(navigation) = {
		headerTitle: '周报',
		headerRight: <View style={{margin:10}}/>,
        headerTitleStyle: {
            fontWeight: 'normal',
            color: '#2196F7',
            alignSelf: 'center'
        },
    };

    render() {
        const {navigate} = this.props.navigation;
        return (
		  <ScrollView>
			<View style={{flexDirection:'column',flex:1}}>
			  <View style={{flex:1}}>
				<Text style={styles.dateText}>{curDate.getFullYear()}.{curDate.getMonth() + 1}.{curDate.getDate()} {weekday[curDate.getDay()]}</Text>
			  </View>
			    <Modal
				animationType='fade'
				transparent={true}
				visible={this.state.modalVisible}
				onRequestClose={() => {
					this.onRequestClose()
				}}
				>
				<View style={styles.container}>
				  <View style={styles.innerContainer}>
					<View>
					  <Text style={styles.sharetxt}>分享到:</Text>
					</View>
					<View style={styles.imgShareArea}>
					  <View style={styles.imgShare}>
						<Image source={require('./../res/calendar/WeChat.png')} />
					  </View>
					  <View style={styles.imgShare}>
						<Image source={require('./../res/calendar/WeChatFriend.png')} />
					  </View>
					  <View style={styles.imgShare}>
						<Image source={require('./../res/calendar/QQ.png')} />
					  </View>
					  <View style={styles.imgShare}>
						<Image source={require('./../res/calendar/Weibo.png')} />
					  </View>
					</View>
					<TouchableHighlight underlayColor="black" onPress={() => this.onRequestClose()}>
					  <View style={styles.cancel}>
						<Text style={styles.cancelTxt}>取消</Text>
					  </View>
					</TouchableHighlight>
				  </View>
				</View>
			  </Modal>
			<View style={{flex:5,flexDirection:'column',paddingTop:10}}>
			  <View style={{flexDirection:'row',padding:20,paddingLeft:30}}>
			    <View style={{paddingRight:5,justifyContent:'flex-end',alignSelf:'center'}}>
			      <Text style={{fontSize:16,color:'#383838'}}>今天是使用app的第</Text>
			    </View>
				<View style={{paddingLeft:5,paddingRight:5}}>
				  <Text style={{fontSize:25,color:'black',fontStyle:'italic',fontWeight:'bold'}}>17</Text>
				</View>
				<View style={{paddingLeft:5,justifyContent:'flex-end',alignSelf:'center'}}>
			      <Text style={{fontSize:16,color:'#383838'}}>天</Text>
				</View>
			  </View>
			  <View style={{flexDirection:'row',padding:20,paddingLeft:80}}>
			    <View style={{paddingRight:5,justifyContent:'flex-end',alignSelf:'center'}}>
			      <Text style={{fontSize:16,color:'#383838'}}>在这周,我总共完成了</Text>
				</View>
				<View style={{paddingLeft:5,paddingRight:5}}>
			      <Text style={{fontSize:25,color:'black',fontStyle:'italic',fontWeight:'bold'}}>13</Text>
				</View>
				<View style={{paddingLeft:5,justifyContent:'flex-end',alignSelf:'center'}}>
			      <Text style={{fontSize:16,color:'#383838'}}>任务</Text>
				</View>
			  </View>
			  <View style={{flexDirection:'row',padding:20,paddingLeft:150}}>
			    <View style={{paddingRight:5,justifyContent:'flex-end',alignSelf:'center'}}>
			      <Text style={{fontSize:16,color:'#383838'}}>成功打卡</Text>
				</View>
				<View style={{paddingLeft:25,paddingRight:25}}>
			      <Text style={{fontSize:25,color:'black',fontStyle:'italic',fontWeight:'bold'}}>6</Text>
				</View>
				<View style={{paddingLeft:5,justifyContent:'flex-end',alignSelf:'center'}}>
			      <Text style={{fontSize:16,color:'#383838'}}>天</Text>
				</View>
			  </View>
			  <View style={{flexDirection:'column',padding:20,paddingLeft:150}}>
			    <View style={{paddingBottom:20}}>
			      <Text style={{fontSize:16,color:'#383838'}}>任务失败的原因有</Text>
				</View>
				<View style={{flexDirection:'row',padding:10}}>
				  <View style={{paddingLeft:10,paddingRight:10,padding:1,justifyContent:'flex-end',alignSelf:'center',backgroundColor:'white',borderWidth:1}}>
			        <Text style={{fontSize:13,color:'#383838'}}>有其他突发事件要处理</Text>
				  </View>
				  <View style={{paddingLeft:80}}>
				    <Text style={{fontSize:25,color:'black',fontStyle:'italic',fontWeight:'bold'}}>X2</Text>
				  </View>
				</View>
				<View style={{flexDirection:'row',padding:10}}>
				  <View style={{paddingLeft:15,paddingRight:15,padding:1,justifyContent:'flex-end',alignSelf:'center',backgroundColor:'white',borderWidth:1}}>
			        <Text style={{fontSize:13,color:'#383838'}}>身体不舒服</Text>
				  </View>
				  <View style={{paddingLeft:60}}/>
				  <View style={{paddingLeft:80}}>
				    <Text style={{fontSize:25,color:'black',fontStyle:'italic',fontWeight:'bold'}}>X1</Text>
				  </View>
				</View>
			  </View>
			</View>
            <View style={{flex:2,flexDirection:'row',marginTop:100}}>
			  <View style={{flex:7}}/>
			  <View style={{flex:1}}>
			    <TouchableHighlight underlayColor="#eee" onPress={() => this.showModal()}>
				  <Image style={styles.shares} source={require('./../res/icon/share-icon.png')} />
			    </TouchableHighlight>
			  </View>
			</View>
		  </View>
		</ScrollView>
        )
    }
	showModal() {
        this.setState({
            modalVisible: true
        })
    };

    onRequestClose() {
        this.setState({
            modalVisible: false
        });
    };
}

const styles = StyleSheet.create({
	dateText: {
        fontSize: 12,
        marginTop: 20,
		marginRight: 20,
        alignSelf: 'flex-end',
    },
	container: {
        flex: 1,
        justifyContent: 'center',
        padding: 40,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    innerContainer: {
        borderRadius: 10,
        backgroundColor: '#fff',
        height: 150,
    },
    sharetxt: {
        marginLeft: 20,
        marginTop: 10,
        textAlign: 'left',
        fontSize: 18,
    },
    imgShareArea: {
        paddingLeft: 20,
        paddingRight: 20,
        flexDirection: 'row',
        height: 80,
        borderBottomWidth: 1,
        borderColor: '#eee',
        justifyContent: 'center',
        alignSelf: 'center',
    },
    imgShare: {
        flex: 1,
        marginLeft: 20,
        marginTop: 10,
    },
    cancel: {
        paddingTop: 5,
        flexDirection: 'row',
        justifyContent: 'center',
        alignSelf: 'center',
    },
    cancelTxt: {
        color: 'red',
        fontSize: 18,
    },
})

export default ReportScreen;
